import React, { Component } from 'react';
import './Detail.scss'
import { good_goodinfo } from '../utils/api'
import { NavBar, Toast } from 'antd-mobile'
import { Swiper } from 'antd-mobile'
import { create_unfavrequest_action, create_collrequest_action, create_addshop_request_action } from '../store/actionCreate/index'
import { StarOutline, StarFill, SendOutline, GiftOutline } from 'antd-mobile-icons'
import { connect } from 'react-redux'
import { Skeleton } from 'antd-mobile'
class Detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            infolist: {},
            itemscount: 0,
            showElem: false,
        }
    }
    componentDidMount() {
        console.log('获取参数', this.props.location.state.goodid)
        good_goodinfo({ goodid: this.props.location.state.goodid }).then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
                this.setState({ infolist: res.data.goodinfo })
            }
        })
        // let items = this.props.shopList.find((element) => {
        //     return element.id == this.state.infolist.id
        // })
        // if (items) {
        //     this.setState({ itemscount: items.count })
        // } else {
        //     this.setState({ itemscount: 0 })
        // }
    }
    get iscoll() {
        let index = this.props.collList.findIndex((element) => {
            return element.id == this.props.location.state.goodid
        })
        if (index == -1) {
            return false
        } else {
            return true
        }
    }
    // 收藏
    handleColl(payload) {
        this.props.collrequest(payload);
    }
    // 取消收藏
    cancelColl(payload) {
        this.props.unfavrequest(payload);
    }
    // 加入购物车
    shopadd() {
        this.setState({ showElem: !this.state.showElem })
    }
    // 隐藏遮罩
    hideCilk() {
        this.setState({ showElem: false })
    }
    //阻止冒泡
    stopmp(e) {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    }
    addhandleshop(payload) {
        this.props.addshop_request(payload)
        Toast.show({
            icon: 'loading',
            content: '加载中…',
        })
    }
    render() {
        return (
            <div>
                <NavBar back='返回' onBack={() => { this.props.history.go(-1) }}>
                    商品详情
                </NavBar>
                <div className="info">
                    {/* 轮播图 */}
                    <div className='swiper'>
                        <Swiper>
                            {//请求返回商品列表前, 显示骨架屏
                                this.state.infolist.length == 0 ?
                                    <>
                                        <Skeleton.Title animated />
                                        <Skeleton.Paragraph lineCount={5} animated />
                                    </> :
                                    this.state.infolist.pics &&
                                    this.state.infolist.pics.map((element, index) => {
                                        return (
                                            <Swiper.Item key={index} >
                                                <img src={element} alt="" />
                                            </Swiper.Item>
                                        )
                                    })
                            }
                        </Swiper >
                    </div>
                    {/* 轮播图 */}
                    <div className="price">
                        <div className="pricebox">活动价￥<span>{this.state.infolist.salesPrice && this.state.infolist.salesPrice.value}</span></div>
                        <div className="time">距离结束5天0小时</div>
                    </div>
                    {this.state.infolist.activityTags &&
                        this.state.infolist.activityTags.map((element, index) => {
                            return (
                                <span className='box_' key={index}>{element}</span>
                            )
                        })
                    }
                    <div className="name">{this.state.infolist.brandEN}{this.state.infolist.name}</div>
                    {/* 测试store */}
                    <h1>{this.props.count}</h1>

                    {/* 弹窗 */}
                    {
                        this.state.showElem ? (
                            <div className="tanchuang" onClick={() => { this.hideCilk() }}>

                                <div className="tanchuang_xi" onClick={(e) => { this.stopmp(e) }}>
                                    <div className="content">
                                        {

                                            <div className="content_xi">
                                                <img src={this.state.infolist.pic} alt="" />
                                                <p>{this.state.infolist.salesPrice && this.state.infolist.salesPrice.value}</p>
                                            </div>


                                        }
                                    </div>
                                    <div className="countdv">
                                        <div className="countdv_text">
                                            数量:
                                            <button>x1</button>
                                        </div>
                                        <div className="addcount_btn">
                                            <button onClick={() => { this.addhandleshop(this.state.infolist) }}>确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ) : null
                    }
                    {/* 弹窗 */}

                    {/* 底部tabbar */}
                    <div className="foot">
                        {/* 控制显示和隐藏 */}
                        {

                            this.iscoll ?
                                (<div className="footbox" onClick={() => { this.cancelColl(this.state.infolist) }}>
                                    <StarFill fontSize={24} color='red' />
                                    收藏
                                </div>) : null


                        }
                        {this.iscoll ? null :
                            (<div className="footbox" onClick={() => { this.handleColl(this.state.infolist) }}>
                                <StarOutline fontSize={24} />
                                收藏
                            </div>)
                        }

                        <div className="footbox">
                            <SendOutline fontSize={24} />
                            分享
                        </div>
                        <div className="footbox" onClick={() => { this.props.history.push('./Index/ShopCart') }}>
                            <GiftOutline fontSize={24} />
                            购物车
                        </div>
                        <div className='btn'>
                            <button onClick={() => { this.shopadd() }}>加入购物车</button>
                            <button>立即购物</button>
                        </div>

                    </div>
                </div>
            </div>
        );
    }
}

// export default Detail;

export default connect(
    (state) => {
        return {
            collList: state.collList,
            shopList: state.shopList
        }
    },
    (dispatch) => {
        return {
            collrequest: function (payload) {
                dispatch(create_collrequest_action(payload))
            },
            unfavrequest: function (payload) {
                dispatch(create_unfavrequest_action(payload))
            },
            addshop_request: function (payload) {
                dispatch(create_addshop_request_action(payload))
            },

        }
    }
)(Detail)